<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <base href="<%=basePath%>">
    
    <title>energy</title>
	<jsp:include page="../analysisInclude.jsp"></jsp:include>

</head>
<body>
	
	<div class="container-fluid">
	  <div class="row">
	    <div class="col-xs-3"><input type="text" class="form-control form_datetime" id="createDate" name="createDate" data-date-icon="icon-calendar" readonly value=""></div>
		<div class="col-xs-9"></div>
	  	<div class="col-xs-12"><div id="container"></div></div>
	  </div>
	</div>
	
	<input type="hidden" id="ProjectCode" value="${ProjectCode}"/>
	<input type="hidden" id="DeviceID" value="${DeviceID}"/>
	
    <script type="text/javascript">
    var path = "<%=path%>";
    var ProjectCode = $('#ProjectCode').val();
    var DeviceID = $('#DeviceID').val();
    
    $(function () {
    	
    	/*********************** 日期控件*********************************/
		$("#createDate").val($("#createDate").val().substring(0,10));
   		$(".form_datetime").datetimepicker({
			 minView: "month", //选择日期后，不会再跳转去选择时分秒 
			 format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式 
			 language: 'zh-CN', //汉化 
			 autoclose:true //选择日期后自动关闭 
	 	  }); 
   		
   		$("#createDate").change(function(){
   			var date = $(this).val();
   			getEchart(ProjectCode,DeviceID,date);//初始化
   		});	
   		
   		var InitDate = dateFormatter(new Date());
   		$("#createDate").val(InitDate);
   	    /************************** 日期控件 end**************************/
   		
   		getEchart(ProjectCode,DeviceID,InitDate);//初始化
		     
	});
    
    function dateFormatter(value) {
    	var date = new Date(value);
    	var Y= date.getFullYear() + '-';
    	var M = (date.getMonth()+ 1) < 10 ?'0'+ (date.getMonth()+1) + '-':(date.getMonth()+1)+'-';
    	var D = date.getDate()< 10 ?'0' +  date.getDate(): date.getDate();
    	return Y+M+D;
    }
    
    function getEchart(ProjectCode,DeviceID,date){
        $.ajax({
	        type : "post",
	        url: "http://202.105.104.105:8804/energy/get?AccessToken=bd4f1ce1b544463094726ebc23a6c9f1",
	        async:true,
	        data:{
	          'ProjectCode':ProjectCode,
	          'DeviceID':DeviceID,
	          'Date':date
	        },
	        dataType: 'json',
	        success: function(data){
			      var collectTimeArrary = new Array();
			      var collectDataArrary = new Array();
	              $.each(data.data,function(i,item){
	            	   console.log(item);
	            	   collectTimeArrary.push(item.CollectTime);
				       collectDataArrary.push(item.CollectData);
	        	  });
	               
				  setTimeout(function () {
			            fetchData(collectTimeArrary,collectDataArrary);
			      }, 50); 
	         },
	        error:function(){
	               console.log("服务中断");
	        }
	      })
    }
    
    
    /******************** echart *****************************/
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    
    function fetchData(collectTimeArrary,collectDataArrary) {
            myChart.setOption({
                xAxis: {
                    data: collectTimeArrary
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '逐时能耗统计',
                    data: collectDataArrary
                }]
            });

    }
    

    // 初始 option
    option = {
        title: {
            text: '逐时能耗统计'
        },
        tooltip: {
        	trigger: 'axis'
        },
        legend: {
            data:['逐时能耗统计']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '逐时能耗统计',
            type: 'line',
            data: []
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    } 
    /******************** echart end*****************************/
    </script>
</body>
</html>